import React, { lazy, Suspense } from 'react'
import { Layout } from 'antd';
import '../assets/css/index.css'
import VNav from '../components/vNav';

import { Routes, Route, Navigate } from 'react-router-dom';
const Home = lazy(() => import('../views/home'))
const Menu = lazy(() => import('../views/menu/menu'))
const Role = lazy(() => import('../views/role'))
const User = lazy(() => import('../views/user'))
const Cate = lazy(() => import('../views/cate'))
const Specs = lazy(() => import('../views/specs'))
const Goods = lazy(() => import('../views/goods'))
const Number = lazy(() => import('../views/number'))
const Banner = lazy(() => import('../views/banner'))
const Seckill = lazy(() => import('../views/seckill'))



const { Header, Sider, Content } = Layout;


export default function Index() {
    return (
        <div className='index'>
            <Layout>
                <Header className='header'>
                    <h3>XXX大型后台管理系统</h3>
                </Header>
                <Layout>
                    <Sider width='256'>
                        <VNav />
                    </Sider>
                    <Content>
                        <Suspense fallback={<div>正在加载二级路由！！</div>}>
                            <Routes>
                                <Route path='home' element={<Home />}></Route>
                                <Route path='menu' element={<Menu />}></Route>
                                <Route path='role' element={<Role />}></Route>
                                <Route path='user' element={<User />}></Route>
                                <Route path='cate' element={<Cate />}></Route>
                                <Route path='specs' element={<Specs />}></Route>
                                <Route path='goods' element={<Goods />}></Route>
                                <Route path='number' element={<Number />}></Route>
                                <Route path='banner' element={<Banner />}></Route>
                                <Route path='seckill' element={<Seckill />}></Route>

                                {/* 二级路由重定向*/}
                                <Route path='' element={<Navigate to='home'></Navigate>}></Route>
                            </Routes>
                        </Suspense>
                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}
